<template>
  <div>
    <!-- 头部导航 -->
    <w-bread-nav title="支付中心"></w-bread-nav>
    <div class="paySuccess app-container">
      <div class="payIcon">
        <div class="payBg"></div>
      </div>
      <div class="tip">贷款资料提交成功</div>
      <div class="btn-groups">
        <w-button class="btn" @on-click="$router.replace('/')">返回首页</w-button>
        <w-button class="btn" @click.native="goOrder">查看订单</w-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      // 查询订单
      goOrder() {
        this.$router.replace('/my/order')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .paySuccess {
    height: 318px;
    margin-top: 20px;
    background-color: $color-white;
  }
  .payIcon {
    padding-top: 28px;
    padding-bottom: 28px;
    .payBg {
      width: 131px;
      height: 131px;
      background-image: url('../../assets/icon-extra-success.png');
      background-repeat: no-repeat;
      background-size: contain;
      margin: auto;
    }
  }
  .tip {
    font-size: 24px;
    text-align: center;
    color: $color-dark;
    margin-bottom: 38px;
  }
  .btn-groups {
    margin: 0 auto;
    text-align: center;
    .btn {
      border: 1px solid $border-gray;
      color: $color-dark;
      width: 110px;
      height: 28px;
      margin: 0 15px;
    }
  }
</style>
